1年经验 react


1实现垂直水平居中

flex grid position

2h5新特性

3标准盒模型+Ie盒模型

4闭包 

5垃圾回收机制 
引用清除法 标记清除法

6Es6新特性
解构赋值 箭头函数 扩展运算符 

7foreach

8fiber 

9 react setState 同步和异步

10hook

11防抖和节流
function debounce(fn, delay) {

}
12三次握手

13ts 

14你封装过组件吗 

15redux

16封装自定义hook

17强缓存和协商缓存

18性能优化

/////////////////////////////////
1.什么是高级组件（HOC）

2 什么是闭包

3 什么是内存泄漏 

4 react19 新特性

5 useEfect对应哪几个生命周期

6useEffect不传

7useEffect为什么不支持异步

8 git merge和git rebase

9 useRef

10 父调子

11 spa应用 静态资源挂了 怎么搞

方案1:全局捕捉异常 设置默认图片

12get post区别

13http1.0 2.0 3.0

14https和http 

15opcicy 透明度 外部乘以内部

16页面数组 map  五个div  绑定item 11 2 3 4     5 6 7 8 9

17 html script aysnc defer 

18 webpack的打包流程

19webpack怎么分包 

20 plugin和loader区别

21 自定义plugin

22 页面白屏怎么处理

23 H5怎么做到一页渲染 

24 rem是什么

//

1 vue 和react 区别

2 标准和模式和ie盒模式 

3 id class 

4 动画 

5 原型和原型链

6 基本数据类型 
n s ob a sy boolea bigint

7 symbol

8 p p sli map filter fill foreach 

9 let cosnt var区别

10 promise .all .once

11 ref和reactive 

12 vant vue2 

13vue3生命周期、

14 

data:{
    a:1
}

<setup:>


</setup:>


15 
token

16

一年 郑州 

1 发布订阅者模式

2 vuex

3 v-if和v-show区别

4 watch和computrd

5 vue2 组件 父组件

6 vue2响应式原理

7 mixin

8 Es6新特性 const ,all 

9 防抖和节流

10 手写个节流

11 闭包

12 事健循环

13 三次握手

14 http1.0 2.0 3.0


// 目前模拟面试的是六年

1浏览器输入url发生了什么

2页面白屏怎么办

3页面地图三十w个点怎么保证页面不卡顿

4列表30w数据怎么处理 

5怎么判断进入视口 

6虚拟滚动 30w 数据滚动会卡顿吗
节流？？？？？？？？

7 git怎么做回退 git reset 

8 git merge和git rebase

9 微前端 样式隔离

10 iframe怎么和页面进行通信 postmessage

11 浏览器不同

12indexDb溢出怎么办

13 数组 次序打乱 京东算法 

14 最长子序列

15 低代码

16 小程序 双线程 冷启动 热启动

17 权限管理 rbac apl  

18 seo优化

19 ssr渲染

20 webpack的打包流程

21 flex:1

22 执行上下文

23 onclick和click区别 捕获

24 let a = "1"
let b = new String("1")
区别 位置 堆栈 原型链 

25 https和http

26 页面按钮 点击 白屏

27 页面图片无法访问 

28 BFC

29 塌陷解决 

30 js浮点数 0.1+0.2=0.30000000000000004计算问题？？？？
数据存储方式

31 垃圾回收机制 最新 

32 Es6新特性

33 模块化 common.js  

34 require 

//

1 行内元素和块级元素

2 id选择器和类选择器

3 实现垂直居中

4 垃圾回收机制 

5 let const var 

6 数组方法 .map

7 vue3 diff 

8 vue3 key 

9 ref 和 reactive 

10 toRefs 

11 vue3 响应式原理

12 vuex 

13 mixin

14 vue2和vue3区别 

15 token 

16 权限怎么做的

17 get和post区别

18 vue传值 

19 四次挥手

//
console.log(3>2>1)

// vue2 vue3 react区别

1 垂直水平居中

2 闭包 

3 js垃圾回收机制

标记清楚 

4 手写防抖
function debounce(fn, delay) {
    let timer = null;
    return function () {
        if (timer) clearTimeout(timer);
        timer = setTimeout(() => {
            fn.apply(this, arguments);
        }, delay);
    }   
}

// 
5原型和原型链
null

6vue2 响应式原理 

7 vuex 

8 
watch reactive({
    name:"",
    age:""
}) 

wacth(()=>)

//
watch wacthEffect

9 
v-if 和 <v-for>
</v-for>

10 react fiber

11 <option value=""></option>

12
<div 0.1>
     <fiv 0.2>
        xxxxx
     </fiv >
</div>

13 http和tttps 

14 get和post

15 webpack的打包流程

16 性能优化 

17 打包通知用户更新

18 首页白屏

19 场景 
图片加载不出来 

20 微前端样式是怎么做隔离的 

21  一个页面选面30w 前端怎么优化

22 三次握手

23http1.0 2.0 3.0

24 git merge 和 git cherrick

25  vue2自定义指令

26 vue3 自定义hook

27 如何封装好一个组件

28 工作中遇到特别困难的问题 你是怎么解决的

29 权限 

30 路由模式 history 和 hash 

31 事件循环

32 发布订阅者模式 手写一个

// 


前端模拟面试

// 1 vue2和vue3有什么区别

// 2 vuex

// 3 ref和reactive 

// 4 js垃圾回收机制
1 标记清除法
2 引用计数法

// 5 toREfs 和 toRefs

// 6 watch和watchEffect

// 7 vue2生命周期和vue3生命周期

// 8 vue2 .sync

// 9 react fiber

// 10 useEffect模拟生命周期

// 11 类组件生命周期

// 12 setState是同步是异步的

// 13 HOC

// 14 vue3 自定义hook

//  15 前端要渲染30w条数据 

// 16 vue2diff 和 vue3

// 17 vue3key和vue2 key作用

// 18 四次挥手

// 19 http1.0 1.1 2.0

// 20 hash history

// 21 v-model的实现原理

//
model:{
    prop:"value",
    event:"change"
}

// 
<div 0.1>
    <fiv 0.2>
        0.02
    
    </fiv>
</div>

// 22 手写发布订阅者

// 23 手写节流

// 24webpack打包流程

// 25 如何封装一个组件 你需要考虑什么

// vue2 父子组件 生命周期步骤

// 26 手写promise

// 27 事件循环 

// 28 闭包

// 29 浏览器输入url发生了什么

// 30 三次握手

// 31强缓存和协商缓存

// $nextTick

vue2 

// 1.什么是发布订阅  

// 2.js-防抖和节流

// 3.js-自定义指令

// 4.js-aysnc await 
aysnc function(){
    let a = await fetch("")
    let b = await fetch("")
}
// vue2
// 5.v-if v-for优先级

// 6 mixin
mixin {
    data(){
        return{
            name:"a"
        }
    }
}
.vue
<script>
    export default {
        mixins:[mixin]
        data(){
            return{
                name:"b"
            }
        }
    }
</script>

// 7vue2生命周期
beforeCreate(){

}
created(){
    window.addEventListener("resize",this.handleResize)
    let a = setTimeout(()=>{
        console.log(this.name)
    },1000)
}
beforeMount(){
}
mounted(){
}
beforeUpdate(){
}
updated(){
}
beforeDestroy(){
}
destroyed(){
    clearTimeout(a)
    window.removeEventListener("resize",this.handleResize)
}
 内存泄漏

 9 垃圾回收机制
 1 标记清除法
 2 引用计数法

 // 10 数组方法 五种常用的方法
 indexOf splice(index,1,[xxxx]) 
 for in   map foreach for of
const arr = [1,2,3,4,5].map((item)=>{
    return item*2
}
)
const arr = [1,2,3,4,5].forEach((item)=>{
    return item*2
}
)
// 11 什么是闭包

// 12 什么是原型链

// 13 Vue3响应式

// 14 vuex
state getter mutations actions 

state:{
    name:"xxxx",
}
mution(state){
    function(){
        st.name = "xxxx"
    }
}
dispatch

// jquery element ui

// $refs
父组件
<child ref="child"></child>

<child>
    data:{
        name:"xxxx"
    }
</child>

// 封装过组件吗 

// computed和watch区别

//
arr=[{
    name:"xxx",age:"xxxx"
},
{
    name:"xxx",age:"xxxx"
}]
arr.map((item)=>{
    var temp = item.name+ item.age
})

// 后台管理系统 

// 权限 路由权限

// 权限 按钮权限

// 轮播
// 插槽
父组件
<child #header></child>
<child v-slot:header="geyao">
   geyao
</child>

子组件
<template>
    <div>
        <slot name="header" :geyao="data"></slot>
    </div>
</template>
data

//  keep-alive
include exclude

// 内置组件 transtion

// 内置组件 transtionGroup

// 内置组件teleport

// 内置组件 suspense




// 1 什么是发布订阅

// 2 teleport

// 3 transition

// 4 防抖和节流
手写节流
fun

// 5
geyao=[{name:xxxxx,age:xxxxxx},{name:xxxxx,age:xxxxxx}]
arr
geyao.map((item)=>{
    var temp = item.name+ item.age
})
// 6 vue3 watch和watchEffect

// 7 pinna

// 8 state {
    name
}

// 9 storeToRef  ref

// 10 shallowReactive(geyao)和ref(geyao)

// 11 插槽
父组件
<child>
    <template #header>插槽内容</template>
</child>
子组件
<div>
    <slot name="header"></slot>
</div>

// 
12 keep-alive include exclude max

// 13 $attrs
父组件
<child :a="a" :b="b" :c="c" ></child>

14 子组件
<div>{{$attrs}}</div>
15 defineProps(['a','b'])

//16 history和hash

//17 toRefs

//18 自定义hook 

//19  事件循环

//20 apply call

//21 内存泄漏

//22 v-if 和 v-for优先级

//23 coupumted

//24$nextTick

//  四个月 深圳南山 鸿蒙 

// 实现div的垂直水平居中 
<div>
    <div></div>
</div>
flex grid
1{
    display: flex;
    align-items: center;
    justify-content: center;
}
2 posttion
{
    position:relative;
}
div{
    position: absolute;
    top:50%;
    left:50%;
    
}

// 标准和模式和ie盒模式

// 什么是闭包

// 垃圾回收机制 标记清除法 引用计数法

// 数组方法 shift  unshift pop push include indexof reduce
sort map some
Array

// ES6  let const var

// promise.all promise.race 

// 手写发布订阅

// computed实现原理

// teleport

// $nextTick

// vue3 ref reactive

// 微前端

// 一个路由 keepLive
//{
    path:"/report"
}
iframe url

// react 

// vue3 hook 

// mixin

// vue2 filter为甚
filter:comxxxx(xxxxx){}

methods:{

}

// vue2自定义指令

// webpack的工作流程

// class 
// HOC
// 页面图片无法加载 前端如何优化

// diff vu2 vue3 react19

//
<div 0.2>
    <div 0.3>
       0.06
    </div>
</div>
// 前端加载30w怎么优化

半年 
1 h5的新特性 语义化标签 表单 

2 div水平垂直居中
flex 弹性   

3 事件循环 宏任务-微任务

4 闭包 

5 防抖和节流定义

6 场景
dialog  姓名 年龄  确定  调接口 - 弹框
防抖+状态

7 ES6新特性 promise aysnc let const ()=>{}

8 let var 会计
for(var i=0;i<10;i++){
   setTimeout(()=>{
       console.log(i)
   },1000)
   
}
for(let i=0;i<10;i++){
    setTimeout(()=>{
        console.log(i)
    },1000)
}
9内存泄漏

10 垃圾回收机制
标记清除法  引用计数法

11 $nextTick

12 React fiber

13 redux

14 useCallback useMemo

15 函数式组件 

16 webpack

17 单向链表和双向链表

// 26届

1 $nextTick

2 原理

3 watch 和 wactchEffect

4 reactive ref
 
5 vue2 和 vue3响应式

6 vuex
mutation module

mutation action

7 pinia

8 vuex 和 pinia

9 vue2 和vue3 生命周期
beforeCreated

mounted 

updated

destroyed


10 实战 

11 管理系统 
登录 后端返回的tokne 放在本地缓存
路由守卫

12 动态路由 控制路由
v-haspermisson

13 自定义指令怎么写


14 自定义hook
15 公用的方法

16 封装组件 element-plus
封装table
defineProps
dinfineEmits

17遇到到比较难得问题吗 
element-plus版本问题 

18 tree 

19 flex:1

20 基本表单  

21 v-if和v-for优先级 vue3

22 内置组件 teleport

23 场景 
A：{    B:{

}

}
A          B            c
年龄:         姓名:        姓名:
姓名:xxxxx    年龄:BBB

24 <keepalive
</keepalive

25 hash路由就和history


vue2 1年

# vue2生命周期和vue3
vue2生命周期
created() {
  console.log("created");
},
mounted() {
  console.log("mounted");
},
updated() {
  console.log("updated");
},
destroyed() {
  console.log("destroyed");
},

vue3生命周期
beforeCreate() {
  console.log("beforeCreate");
},
created() {
  console.log("created");
},
beforeMount() {}
mounted() {
  console.log("mounted");
},
beforeUpdate() {
  console.log("beforeUpdate");
},
updated() {
  console.log("updated");
},
beforeUnmount() {
  console.log("beforeUnmount");
},

#
onmou

# vuex 有几个属性
state mutations actions getters module

# vuex模块化
module  A.js  B>js  c>js</keepalive>
index.js

# vuex原理

# mixin

# watch和computed区别

# computed实现原理

# vue3官网 
内置组件 transtionGroup

# 有遇到比较困难的

# 自定义hook 

# 自定义指令 

# vue2和vue3区别

# v-model

#  A=[{
    name:'A'
    学号‘学号’
}{
    name:'A'
    学号‘学号’
}]
保存
function AAA(A){
    let a = {}
    A.foreach((item)=>{
    var xxx = item.name +  item.学号
       a[xxx] = item
    })
}

# 内存泄漏

# 垃圾回收机制
1. 引用计数
2. 标记清除

# 原型链和原型

# promise.all 和 promise.race

# aysnc await

# let const var

# 说出10种
map filter forEach reduce some every sort
find unshift shift splice slice

# js-事件循环

# 手写防抖


前端 
# js-手写promise
# js-手写filter
Array.prototype.filter = function(fn,array) { 
    var geyao  = []
    for(var i = 0; i < this.length; i++) { 
        if(fn(this[i])) { 
            geyao.push(this[i])
        }
    }
    return geyao
}
Array.prototype.myFilter = function(fn, thisArg) {
    if (typeof fn !== 'function') {
        throw new TypeError(fn + ' is not a function');
    }
    const arr = this;
    const result = [];
    for (let i = 0; i < arr.length; i++) {
        // 使用 call 来绑定 thisArg，并传递三个参数：当前值、索引、原数组
        if (fn.call(thisArg, arr[i], i, arr)) {
            result.push(arr[i]);
        }
    }
    return result;
};

# let a = {
    name: 'geyao',
    age: 18
}
let b = {
    person: a
}

a.sex = a= {
    name: 'geyao2',
    age: 19
}
console.log(b.sex,a,b.person.sex)

a {
    name: 'geyao2',
    age: 19,
    sex
}
let value = 1

let newValue = value

// 模拟面试




// 应届生 
 
1 div水平垂直居中

2 IE盒盒标准盒模型

3 基本数据类型 string number boolean null undefined

4 防抖和节流定义

5 函数柯里化

6 浏览器垃圾回收机制
标记清除
7纯函数的定义

8事件委托

9 数组方法 sort push indexof map foreach filter 

10 const可以声明复杂数据类型吗?

11 mixin

12 父子传值 props emit

13 vuex state  mutation action module getter

state {
    count:
    age:
}

14 jq

15 filter  |

16 登录如何实现
token
/home 首页
/login

router.beforeEach(to,next,from)

axios 403 
17 jquery vue2+element ui js ajax

18 v2 不同人登录显示不不同的路由

按钮权限怎么做的

19 ref和reactive区别

20watch和watchEffect区别

21 vue2生命周期
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

22 vue3生命周期
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeUnmount
unmounted

23 keepalive组件

24 vue2是如何实现数组的响应式
data:{
    arr:[1,2,3],
    obj:{
        name:'张三'
    }
}
24 toRefs

25 watchEffect

26 vue3自定义hook

27 query传参和parmas传参

/home?name="zhangsan"&age=18"

28 m

// react

// 三年 React 
 1 react fiber

 2 react setState什么时

 3 useMemo ussCallBack

 4 useReducer 

 5 setTimeout为什么会不准

 6 防抖和节流定义
 function debounce(fn,delay){ 
}

7 http1.0 2.0 3.0

8 受控组件和非受控组件 

9 模块化

10 SSE

11 npm pnpm yarn

12页面上的点击按钮是宏任务还是微任务

13 useState 用if会包裹会怎么样

14 做过性能优化吗

15 webpack的打包流程

16 内存泄漏的情况

17 版本更新如何通知用户

18 三年遇到复杂的问题的解决方案
HTMl dragger 
19 链表怎么遍历
[1,2,3,4,5] 8



六年经验 

1 vuex/pinia

2 vue2响应式 objectDefineProperty

3 $nextTick定义和原理 

4 什么是纯组件

5 setState什么是同步和异步的

6 redux用法

7 页面按钮的点击事件是宏任务和微任务

8 微前端qiankun样式隔离

9 http和https的区别

10 tcp四次挥手

11 浏览器缓存

12 cookie 单点登录
domain /

13 埋点 

14 有什么难题 

15 react fiber

16 事件委托的原理 哪些事件不冒泡的

17 函数柯里化

18 react diff

19 SSR服务端渲染原理

20 Map和weakMap的区别

21垃圾回收机制
引用计数 标记清除

22生命周期的

shouCompnet 

23 HOC高阶组件

24react组件通信

25

26优化思路

27骨架屏原理

28 怎么通知用户更新

29 场景

30 git规范

31wepack打包

32观察者模式和发布订阅模式

33
<div 0.2>
    <div 0.1>xxx</div>
</div>

34 setTimeout为什么会不准

35 vite热更新原理

36 http2.0多路复用

37 npm install 

38什么是幽灵依赖

// 四年 React

1react fiber
可中断 

2 什么是纯组件

3 类组件项目常用的生命周期

4 类组件setState什么是异步 什么是同步的

5 usememo和usecallback

6 项目中有没有遇到比较复杂的 怎么解决的

7 项目中节点过多卡死了怎么解决呢

8 usecontext

9 redux和usecontext有什么区别 个人认为

10四年 

11 setTimeout为什么会不准
setTime(()=>{
    console.log(1)
},1000)

12最早的模块化是什么
IIFE

13什么是websockt 

14 vite热更新原理

15 受控组件和非受控组件

16 ref

17 函数柯里化

18 防抖和节流

19 
function debounce(fn,delay){
    let timer = null
    return function(){
        if(timer) clearTimeout(timer)
        timer = setTimeout(()=>{
            fn.apply(this,arguments)
        },delay)
    }
}

20观察者模式和发布订阅者

21发布订阅者定义

22内存泄漏的情景

23垃圾回收机制

24埋点

25http2.0比http1.0

26

// geyaoisnice@163.com
1有写过自定义hook 说说你封装的定义hook

2 vite的热更新原理

3 npm和pnpn和yarn的区别

4 npm install的依赖的流程

5 幽灵依赖

6 常见数组方法 

7 map和forach

8 react diff算法

9 虚拟dom一定比真实dom号码

10什么是SSE

11ESM和UMD的区别

12受控组件和非受控组件

13事件委托

14 flex:1

15 tawind.css

16 微前端

17http和https的区别

18 【0,600】取三个数字 两两之间的差超过100

19 react中usestate为什么不能用if包裹

20react中的组件通信

21项目中遇到比较苦难的问题吗 怎么解决吗

22

// 鸿蒙线程模型是什么

//ArkTs是什么?

//ArkTS的主要特点

//父子组件如何通信?

// 跨设备通信

 // lazyForeach是什么

 //lazyForeach工作原理

 // 鸿蒙的装饰器有哪些

 // 前端模块化的发展历史

 // tls是什么

 // 
 async function async1() {
	console.log('async1 start'); 2
	await async2();
	console.log('asnyc1 end'); 6
}
async function async2() {
	console.log('async2'); 3
}
console.log('script start');  1
setTimeout(() => {
	console.log('setTimeOut'); 8
}, 0);
async1();
new Promise(function (reslove) {
	console.log('promise1');  4
	reslove();
}).then(function () {
	console.log('promise2'); 7
})
console.log('script end'); 5

// Map和Set有什么区别

function Test(name, age){
    this.name = name
    this.age = age
}
Test.prototype.say = function(){
    console.log('我能说话')
}
var obj3 = new Test('Jack', 26)
var obj4 = new Test('Rose', 24)
 
1, Test.prototype === ( obj3.__proto__) ?
2, obj3.__proto__.__proto__ === ( Object.prototype) ?
3, obj3.__proto__ === obj4.__proto__ ? true
4, Test.prototype.__proto__ === (Object.prototype ) ?
5, obj4.__proto__.constructor === ( Test) ?
6, Object.prototype.__proto__ === ( null) ?
7, obj3.say === obj4.say ? true

// 什么是ssR ssr服务端渲染原理

// 重排和重绘

// [0.600]取出三个数 两两之间的差超过100
let arr = []
for(let i=0; i<601; i++){
    arr.push(i)
}
function getNum(arr){
    let rt = []
    for(let i=0;i<arr.length-200;i++){
        let subArr = arr.slice(i,i+200+1)
        let start,middle,end;
        start = subArr[0]
        end=subArr[arr.length-1]
        middle = subArr[arr.length/2]
        rt.push([start,middle,end])
    }
    return rt
}

// jsx和js有什么区别

// 浏览器断网时候缓存怎么运作的

// 前端什么发送option请求

// css设置三角形

// get和post区别

// interface和type 区别

// 骨架屏原理

// 两个对象完全相等吗

// BFC定义

// 开启BFC条件

// localstorage设置一个月的过期

// xss和csrf 怎么防止

//箭头函数和普通函数区别

// slice splice

// webpack的plugin和loader区别

// treeShake怎么清楚无用的代码

// 怎么判断数据是不是数组


